<template>
  <div class="step_05">
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node, ObjectExt } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      metroData: [
        {
          label: "苏州新区火车站",
        },
        {
          label: "惠昌路",
        },
        {
          label: "文昌路",
        },
        {
          label: "长亭",
        },
        {
          label: "铜墩",
        },
        {
          label: "马运路",
        },
        {
          label: "西津桥",
        },
        {
          label: "何山",
        },
        {
          label: "狮子山",
          transfer: [1, 3],
        },
        {
          label: "狮山路",
        },
        {
          label: "沙金桥",
        },
        {
          label: "索山桥西",
          transfer: [3, 5],
        },
        {
          label: "横山",
        },
        {
          label: "横塘",
        },
        {
          label: "石湖北",
        },
        {
          label: "新郭",
        },
        {
          label: "盘蠡路",
          transfer: [2, 3],
        },
        {
          label: "宝带路",
          transfer: [3, 4],
        },
        {
          label: "迎春路",
        },
        {
          label: "北港路",
        },
        {
          label: "通园路北",
        },
        {
          label: "墅浦路北",
        },
        {
          label: "东振路",
        },
        {
          label: "金厍桥",
          transfer: [3, 5],
        },
        {
          label: "李公堤西",
        },
        {
          label: "东方之门",
          transfer: [1, 3],
        },
        {
          label: "烟雨桥",
        },
        {
          label: "倪浜",
        },
        {
          label: "唐庄",
        },
        {
          label: "跨塘",
        },
        {
          label: "苏州园区火车站",
        },
        {
          label: "方湾街",
        },
        {
          label: "丰和路",
        },
        {
          label: "双马街",
        },
        {
          label: "葑亭大道",
          transfer: [3, 5],
        },
        {
          label: "戈巷街",
        },
        {
          label: "唯亭",
        },
      ],
      data: {
      },
      edge: null,
      labels: [],
    };
  },
  methods: {
    initGraph() {
      this.graph = new Graph({
        container: document.querySelector("#container"),
        width: 1500,
        height: 500,
        grid: true,
      });
      this.graph.fromJSON(this.data);
    },
    initEdge() {
      this.edge = this.graph.addEdge({
        source: { x: 50, y: 100 },
        target: { x: 1350, y: 100 },
        attrs: {
          line: {
            stroke: "#7c68fc", // 指定 path 元素的填充色
            targetMarker: ""
          },
        }
      })
    },
    initLabel() {

    },
    setLabel() {
      const labels = [];
      this.metroData.forEach((item, index) => {
        labels.push(
          {
            markup: [
              {
                tagName: "circle",
                selector: "dot"
              },
              {
                tagName: "text",
                selector: "txt"
              },
              {
                tagName: "text",
                selector: "txt2"
              }
            ],
            attrs: {
              dot: {
                fill: "red",
                stroke: "#000",
                strokeWidth: 1,
                r: 5,
                cx: 0,
                cy: 0,
              },
              txt: {
                fill: "#000",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: index % 2 === 0 ? -20 : 20,
                text: item.label
              },
              txt2: {
                fill: "#000",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: index % 2 === 0 ? -40 : 40,
                text: item.transfer ? item.transfer : null,
              },

            },
            position: {
              distance: 1 / this.metroData.length * index + (1 / this.metroData.length * index) / this.metroData.length, // 位置
            }
          }
        )
      })
      // 处理第一个 和 最后一个样式
      labels[0].attrs.dot.strokeWidth = 2;
      labels[0].attrs.dot.r = 6;
      labels[labels.length - 1].attrs.dot.strokeWidth = 2;
      labels[labels.length - 1].attrs.dot.r = 6;

      this.edge.setLabels(labels)
      this.labels = labels;
    },
    startDriving() {

      let count = 0;
      const labels_copy = JSON.parse(JSON.stringify(this.labels))
      setInterval(() => {
        console.log(count);
        labels_copy.forEach((item, index) => {
          if (count === index) {
            item.attrs.dot.fill = 'green'
          } else {
            item.attrs.dot.fill = 'red'
          }
        })
        console.log(labels_copy, 'this.labels');
        // this.edge.setLabels(labels_copy)
        labels_copy.forEach((item, index) => {
          if (count === index) {
            this.edge.appendLabel(item)
          }
        })

        count++;
        if (count === labels_copy.length) {
          count = 0;
        }
      }, 1000)

    }
  },
  mounted() {
    this.initGraph();
    this.initEdge();
    this.initLabel();
    this.setLabel();
    this.startDriving();
  },
};
</script>
<style scoped>
</style>